<template>
  <div class="order">
    <div class="headerhh">
      <div @click="backIndex" style="float: left">
        <a-icon type="left" class="icon" />
        <a class="h3">疼痛等级调查</a>
      </div>
    </div>
    <div class="contents">
      <div class="header">尊敬的患者您好，请完成以下步骤评估您的疼痛等级（<span>1</span>/2）：</div>
      <div class="bodys">
        <div class="left">
          <img src="../../../static/images/pain/body.png"/>
        </div>
        <div class="right">
          <div class="pain-part">
            <span class="pain-left">疼痛部位</span>
            <span class="pain-right" @click="handleSubmit" id="selectpainPart">{{selectName}}</span>
          </div>
          <transition>
            <div class="pull-down" v-show="showDown">
              <ul class="pull-ul">
                <li
                  v-for="(item,index) in downdata"
                  :key="index"
                  @click="itemclick(item.title)"
                >{{item.title}}</li>
              </ul>
            </div>
          </transition>

          <div class="pain-part pain-nature">
            <span class="pain-left">疼痛性质</span>
            <span class="pain-right" @click="handleNatureSubmit" id="selectpainnature">{{selectNatureName}}</span>
          </div>
          <transition>
            <div class="pull-naturedown" v-show="showNatureDown">
              <ul class="pull-ul">
                <li
                  v-for="(item,index) in downnaturedata"
                  :key="index"
                  @click="itemnatureclick(item.title)"
                >{{item.title}}</li>
              </ul>
            </div>
          </transition>
        </div>
      <div class="painposition" :style="{top:top+'rem',left:left+'rem'}" v-show="painPosit">
       <img src="../../../static/images/pain/selected.png"/>
      </div>
      </div>
      <div class="footer">
        <button @click="backIndex">返回</button><button class="nextStep" @click="nextStep">下一步</button>
      </div>
    </div>

    <!--提示-->
    <div class="layder"
         v-if="showimg">
      <div class="lay-cont">
        <div class="stateimg">
          <img src="../../../static/images/indexone/state03.png" />
        </div>
        <p>请选择</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'index',
  data () {
    return {
      pa_id: this.$store.state.personinfo.pa_id, // pa_id
      data: [],
      top: 0,
      painPosit: false,
      left: 0,
      showDown: false, // 下拉框
      showNatureDown: false,
      downdata: [{'title': '头'}, {'title': '左眼'}, {'title': '右眼'}, {'title': '颈'},
        {'title': '左肩'}, {'title': '右肩'},
        {'title': '左胸'}, {'title': '右胸'}, {'title': '左乳房'}, {'title': '右乳房'},
        {'title': '左上臂'}, {'title': '右上臂'}, {'title': '左前臂'}, {'title': '右前臂'},
        {'title': '左手'}, {'title': '右手'}, {'title': '腹部'}, {'title': '左腰'}, {'title': '右腰'},
        {'title': '左臀部'}, {'title': '右臀部'}, {'title': '阴部'}, {'title': '左大腿'}, {'title': '右大腿'},
        {'title': '左小腿'}, {'title': '右小腿'}, {'title': '左踝'}, {'title': '右踝'},
        {'title': '左脚'}, {'title': '右脚'}],
      downnaturedata: [{'title': '跳痛'}, {'title': '压迫痛'}, {'title': '钝痛(隐痛)'},
        {'title': '锐痛'}, {'title': '抽搐痛'}, {'title': '牵拉痛'},
        {'title': '烧灼痛'}, {'title': '绞痛'}, {'title': '放射痛'},
        {'title': '胀痛'}, {'title': '刀割痛'}, {'title': '麻痛'},
        {'title': '闷痛'}, {'title': '感觉异常'}, {'title': '刺痛'}],
      startTime: '', // 开始时间
      endTime: '', // 结束时间
      selectName: '请选择',
      selectNatureName: '请选择',
      showimg: false // 弹出层正在加载
    }
  },
  mounted () {
    document.addEventListener('click', e => { // 除了id为select的点击，下拉框都隐藏
      if (e.target.id !== 'selectpainPart' && e.target.id !== 'selectpainnature') {
        this.showDown = false
        this.showNatureDown = false
      }
    })
  },
  methods: {
    nextStep () {
      if (this.selectName !== '请选择' && this.selectNatureName !== '请选择') {
        this.$router.push({
          name: 'painLevel',
          params: { painPart: this.selectName, painQuality: this.selectNatureName }
        })
      } else {
        this.showimg = true
        setTimeout(() => {
          this.showimg = false
        }, 2000)
      }
    },
    backIndex () {
      this.$router.push('/')
    },
    handleSubmit (event) { // 点击请选择时
      event.preventDefault()
      this.showDown = !this.showDown
      this.showNatureDown = false
    },
    handleNatureSubmit (event) {
      event.preventDefault()
      this.showNatureDown = !this.showNatureDown
      this.showDown = false
    },
    itemclick (idname) {
      this.selectName = idname // 把每一项赋值给标题
      this.painPosit = true
      if (idname === '头') {
        this.top = 0.4; this.left = 4.9
      } else if (idname === '左眼') { this.top = 0.5; this.left = 4.8 } else if (idname === '右眼') { this.top = 0.5; this.left = 5 } else if (idname === '左肩') { this.top = 1.2; this.left = 4.4 } else if (idname === '右肩') { this.top = 1.2; this.left = 5.4 } else if (idname === '左胸') { this.top = 1.7; this.left = 4.6 } else if (idname === '右胸') { this.top = 1.7; this.left = 5.1 } else if (idname === '左乳房') { this.top = 1.7; this.left = 4.6 } else if (idname === '右乳房') { this.top = 1.7; this.left = 5.1 } else if (idname === '左上臂') { this.top = 2.1; this.left = 4.1 } else if (idname === '右上臂') { this.top = 2.1; this.left = 5.8 } else if (idname === '左前臂') { this.top = 3; this.left = 3.8 } else if (idname === '右前臂') { this.top = 3; this.left = 6 } else if (idname === '左手') { this.top = 3.7; this.left = 3.5 } else if (idname === '右手') { this.top = 3.7; this.left = 6.3 } else if (idname === '左腰') { this.top = 3.3; this.left = 4.4 } else if (idname === '右腰') { this.top = 3.3; this.left = 5.4 } else if (idname === '左臀部') { this.top = 3.6; this.left = 4.6 } else if (idname === '右臀部') { this.top = 3.6; this.left = 5.2 } else if (idname === '左大腿') { this.top = 4.3; this.left = 4.5 } else if (idname === '右大腿') { this.top = 4.3; this.left = 5.3 } else if (idname === '左小腿') { this.top = 6.3; this.left = 4.5 } else if (idname === '右小腿') { this.top = 6.3; this.left = 5.3 } else if (idname === '左踝') { this.top = 6.8; this.left = 4.4 } else if (idname === '右踝') { this.top = 6.8; this.left = 5.4 } else if (idname === '左脚') { this.top = 7; this.left = 4.4 } else if (idname === '右脚') { this.top = 7; this.left = 5.4 } else if (idname === '颈') { this.top = 0.9; this.left = 4.9 } else if (idname === '腹部') { this.top = 3.3; this.left = 4.9 } else if (idname === '阴部') { this.top = 3.6; this.left = 4.9 }
    },
    itemnatureclick (idname) {
      this.selectNatureName = idname
    }

  }
}
</script>

<style lang="stylus" scoped>
@import '../../../static/css/color.styl';

.pain-part{
    border: 1px solid #27ae9e;
    height: 0.8rem;
    line-height: 0.8rem;
    width: 6rem;
    border-radius: 0.2rem;
    display: flex;
    padding: 0 0.2rem;
    .pain-left{
      color:#27ae9e;
    }
    .pain-right{
      flex:1;
      text-align:right;
      color: gray;
    }
}
.pain-nature{
  margin-top:0.8rem;
}

.footer{
  text-align:right;
  padding-right:0.3rem;
  button{
    width: 1.5rem;
    height: 0.6rem;
    border-radius: 0.1rem;
    background: #fff;
    border: 1px solid #27ae9e;
    color:#27ae9e;
  }
  .nextStep{
    color:#fff;
    background:#27ae9e;
    margin-left: 0.2rem;
  }
}

.order{
  height:100%;
  background:#f7f8fa;
  display: flex;
  flex-flow: column;
  .contents{
    height: 100%;
    margin: 0.3rem;
    background:#fff;
    .header{
      font-size:0.24rem;
      margin: 0.6rem 0 0 0.3rem;
      span{
        color:#a3e1da;
      }
    }
    .bodys{
      display: flex;
      position:relative;
      .left{
        width:7rem;
        text-align: right;
        img{
          height: 7rem;
          margin-top: 0.5rem;
        }
      }
      .right{
        flex:1;
        padding: 0.8rem 0 0 2rem;
      }
      .painposition{
        position:absolute;
      }
    }
  }
}

.headerhh {
  height: 0.98rem;
  background-color: $color-main;
  text-align: justify;
  line-height: 0.98rem;
  padding-left: 0.3rem;
  color: $color-white;
  // margin-bottom: 0.5rem;

  .icon {
    font-size: 0.36rem;
    color: $color-white;
    vertical-align: -0.07rem;
  }

  .h3 {
    display: inline-block;
    font-size: 0.36rem;
    color: $color-white;
  }
}

  .pull-down {
    width: 6rem;
    height: 3rem;
    background-color: #fff;
    position: absolute;
    top: 1.8rem;
    border-radius: 0.2rem;
    box-shadow: #ccc 0px 1px 1px -1px;
    padding: 0.1rem 0.3rem;
    border: 1px solid #27ae9e;
    .pull-ul {
      height: 2.8rem;
      max-height: 2.8rem;
      overflow-y: auto;

      li {
        font-size: 0.28rem;
        color: #1a1a1a;
        height: 0.5rem;
      }
    }
  }

  .pull-naturedown {
    width: 6rem;
    height: 3rem;
    background-color: #fff;
    position: absolute;
    top: 3.4rem;
    border-radius: 0.2rem;
    box-shadow: #ccc 0px 1px 1px -1px;
    padding: 0.1rem 0.3rem;
    border: 1px solid #27ae9e;
    .pull-ul {
      height: 2.8rem;
      max-height: 2.8rem;
      overflow-y: auto;

      li {
        font-size: 0.28rem;
        color: #1a1a1a;
        height: 0.5rem;
      }
    }
  }

.v-enter {
  opacity: 0;
  transform: translateY(-20px);
}

.v-leave-to {
  opacity: 0;
  transform: translateY(20px);
}

.v-enter-active, .v-leave-active {
  transition: all 0.4s ease;
}

.layder
  position absolute
  top 0
  left 0
  bottom 0
  right 0
  .lay-cont
    width 4rem
    height 2.3rem
    background-color rgba(0, 0, 0, 0.4)
    margin 4.8rem auto
    border-radius 0.3rem
    color #fff
    text-align center
    padding-top 0.4rem
    .stateimg
      width 0.78rem
      height 0.78rem
      margin 0 auto 0.4rem auto
      img
        width 100%
        height 100%
        display block

</style>
